<template>
  <div class="HomeCollectionProductListItem" @click="handleClick">
    <van-image :src="firstImage" width="100%"/>
    <wing-blank>
      <div class="van-ellipsis HomeCollectionProductListItemName">{{ name }}</div>
      <white-space size="mini"/>
      <price :value="price" :decimal="2"/>
    </wing-blank>
  </div>
</template>

<script>
import * as _ from "lodash"
import { Image } from "vant"
import Price from "@/components/Price"
import WingBlank from "@/components/WingBlank"
import WhiteSpace from "@/components/WhiteSpace"

export default {
  name: "HomeCollectionProductListItem",
  components: {
    WhiteSpace,
    WingBlank,
    Price,
    [Image.name]: Image,
  },
  props: {
    product: Object,
  },
  computed: {
    firstImage() {
      const { product } = this
      return _.first(product.imageUrls)
    },
    name() {
      const { product } = this
      return product.name
    },
    price() {
      const { product } = this
      return _.first(product.variants).price
    },
  },
  methods: {
    handleClick() {
      this.$router.push(`/products/${this.product.id}`)
    },
  },
}
</script>

<style lang="scss" scoped>
.HomeCollectionProductListItem {
  width: 100%;

  .HomeCollectionProductListItemName {
    width: 100%;
    font-size: 14px;
  }
}
</style>
